<template>
    <div 
        class="draggable_son"
        :style="{ top: boxTop + 'px', left: boxLeft + 'px' }"
        @mousedown="dragStart"
        @touchstart="dragStart">
        <span class="son_a"> {{message}}</span>
    </div>

</template>



<script setup>
    defineProps(['message'])
</script>


<style>

.draggable_son {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  text-align: center;
  /* line-height: 100px; */
  /* border-radius: 5px; */
  z-index: 10;
}
.son_a{
    position: absolute;
    /* margin-left: 50px;
    margin-top: 50px; */
    width: 50px;
    height: 50px;
    background-color: rgb(19, 223, 172);
    z-index: 12;
}
</style>